import React from 'react';
import './ShortcutDisplay.css';

const ShortcutDisplay: React.FC = () => {
  const [currentShortcut, setCurrentShortcut] = React.useState<string>('');
  
  const formatShortcutForDisplay = (shortcut: string): string => {
    return shortcut
      .replace(/CommandOrControl/g, window.electronAPI?.platform === 'darwin' ? 'Cmd' : 'Ctrl')
      .replace(/\+/g, '+');
  };
  
  const loadShortcut = React.useCallback(async () => {
    try {
      const shortcut = await window.electronAPI.getShortcut();
      const displayShortcut = formatShortcutForDisplay(shortcut);
      setCurrentShortcut(displayShortcut);
    } catch (error) {
      console.error('获取快捷键失败:', error);
      // 使用默认值
      const isMac = window.electronAPI?.platform === 'darwin';
      setCurrentShortcut(isMac ? 'Cmd+Shift+A' : 'Ctrl+Shift+A');
    }
  }, []);
  
  React.useEffect(() => {
    // 初始加载快捷键
    loadShortcut();
    
    // 监听快捷键变化事件
    const handleShortcutChanged = (event: any, newShortcut: string) => {
      const displayShortcut = formatShortcutForDisplay(newShortcut);
      setCurrentShortcut(displayShortcut);
      console.log('快捷键已更新:', displayShortcut);
    };
    
    // 注册事件监听器
    window.electronAPI.on('shortcut-changed', handleShortcutChanged);
    
    // 清理函数
    return () => {
      window.electronAPI.removeAllListeners('shortcut-changed');
    };
  }, [loadShortcut]);

  return (
    <div className="shortcut-display">
      <div className="shortcut-item">
        <span className="shortcut-label">快速截图:</span>
        <kbd className="shortcut-key">{currentShortcut || '加载中...'}</kbd>
      </div>
      <div className="shortcut-item">
        <span className="shortcut-label">取消截图:</span>
        <kbd className="shortcut-key">ESC</kbd>
      </div>
      <div className="feature-tip">
        <span className="tip-icon">💡</span>
        <span className="tip-text">支持区域截图和智能窗口截图两种模式，截图完成后自动保存并复制到剪贴板</span>
      </div>
    </div>
  );
};

export default ShortcutDisplay;